<template>
  <!-- 头部 -->
  <div class="home">
    <mt-header fixed>
      <span slot="left">elm.zx</span>
      <a slot="right" @click="toLogin">登录</a>
      <i slot="right" class="iconfont icon-vertical_line"></i>
      <a slot="right" @click="toLogin">注册</a>
    </mt-header>

    <!-- 定位城市 -->
    <div class="guss">
      <div class="guss_tip">
        <span class="guss_city left">当前定位城市：</span>
        <span class="guss_wrong right"> 定位不准时，请在城市列表中选择</span>
      </div>
      <div class="guss_now">
        <mt-cell
          :title="$store.state.nowCity.name"
          is-link
          to="/city?id=2"
        ></mt-cell>
      </div>
    </div>

    <!-- 热门城市 -->
    <div class="hotCity">
      <hotcity :hotCityLists="this.hotCityLists"></hotcity>
    </div>

    <!-- 所有城市 -->
    <div class="allCity">
      <allcity :allCity="this.allCity"></allcity>
    </div>
  </div>
</template>

<script>
import hotcity from "../components/HotCity";
import allcity from "../components/AllCity";
export default {
  components: {
    hotcity,
    allcity,
  },
  data() {
    return {
      hotCityLists: [],
      allCity: [],
    };
  },
  created() {
    this.getGussCity();
    this.getHotCity();
    this.getAllCity();
  },
  methods: {
    // 获取当前位置
    getGussCity() {
      this.$axios
        .get("http://ip-api.com/json/?fields=520191&lang=zh-CN")
        .then((res) => {
          this.$store.state.nowCity.name = res.data.city;
          this.$store.state.nowCity.id = 2;
        });
    },
    //获取热门城市
    getHotCity() {
      this.$axios.get("/api/v1/cities?type=hot").then((res) => {
        this.hotCityLists = res.data;
      });
    },
    //获取所有城市
    getAllCity() {
      this.$axios.get("/api/v1/cities?type=group").then((res) => {
        this.allCity = res.data;
      });
    },
    //跳转登陆页面
    toLogin() {
      this.$router.push("/login");
    },
  },
  computed: {},
};
</script>

<style scoped lang="css">
.guss {
  margin-top: 2.5rem;
  height: 5.125rem;
  line-height: 2.5rem;
}
.guss_tip {
  background-color: white;
  padding: 0 0.625rem;
  height: 2.5rem;
  border-bottom: 1px solid #e5e5e5;
}
.guss_city {
  font-size: 0.75rem;
  color: #666666;
}
.guss_wrong {
  font-size: 0.75rem;
  color: #9f9f9f;
}
.guss_now {
  height: 2.5rem;
  color: #3190e8;
  border-bottom: 2px solid #9f9f9f;
}
.hotCity {
  margin-top: 1.25rem;
  background-color: white;
}
</style>
